<div class="layui-card">
    <div class="layui-card-header">
        <h2 class="header-title">业务记录明细</h2>
        <span class="layui-breadcrumb pull-right">
          <a href="#!home_console">首页</a>
          <a><cite>业务记录明细</cite></a>
        </span>
    </div>
    <div class="layui-card-body">
<!--         <div class="layui-form toolbar">
           搜索：
            <select id="user-search-key">
                <option value="">-请选择-</option>
                <option value="username">帐号</option>
                <option value="nick_name">负责人</option>
            </select>&emsp;
            <input id="user-search-value" class="layui-input search-input" type="text" placeholder="输入关键字"/>&emsp;
            <button id="user-btn-search" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button> 

        </div>  -->

        <table style='virtualScroll=true'class="layui-table" id="service-table" lay-filter="service-table"></table>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="productSale-table-bar">
     	<a class="layui-btn layui-btn-xs" lay-event="productSaleDetail">销售详情</a>
</script>
<script type="text/html" id="productUse-table-bar">
     	<a class="layui-btn layui-btn-xs" lay-event="productUseDetail">领用详情</a>
</script>
<!-- 表格操作列 -->
<script type="text/html" id="service-table-bar">
     	<% if(stockRecord) { %><a class="layui-btn layui-btn-xs" lay-event="stockRecord">库存记录</a> <% } %>
    	<% if(orderBuy) { %> <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="orderBuy">采购记录</a><% } %>
	 {{# if (d.shopLevel != 3) { }}  
     	<% if(orderSale) { %><a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="orderSale">销售记录</a><% } %>
	 {{# } }}
	 {{# if (d.shopLevel === 3) { }}  
     	<% if(customer) { %><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="customer">顾客记录</a><% } %>
		<% if(customerCard) { %><a class="layui-btn layui-btn layui-btn-xs" lay-event="customerCard">会员卡购买记录</a><% } %>
		<% if(payCard) { %><a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="payCard">会员服务记录</a><% } %>
        <% if(productSale) { %><a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="productSale">产品销售记录</a><% } %>
		<% if(productUse) { %><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="productUse">产品领用记录</a><% } %>
	 {{# } }}
</script>
<!-- 表格状态列 -->
<script type="text/html" id="user-tpl-state">
    {{# if (d.shopLevel === 1) { }}  
		总店
	{{# } else if(d.shopLevel=== 2) { }}  
		招商
	{{# } else if(d.shopLevel=== 3) { }}  
		加盟店
	{{# } }}
</script>

<script>
    layui.use(['form', 'table', 'util', 'admin', 'element','treetable'], function () {
        var form = layui.form;
        var table = layui.table;
        var layer = layui.layer;
        var util = layui.util;
        var admin = layui.admin;
        var treetable = layui.treetable;
        var element = layui.element;

        form.render('select');

        var renderTable = function () {
        // 渲染表格
        treetable.render({
        	treeColIndex: 1,
            treeSpid: -1,
            treeIdName: 'userId',
            treePidName: 'parentId',
            treeDefaultClose: true,
            page: true,
            cellMinWidth:600,
            
            elem: '#service-table',
            url: 'system/service/list',
            where: {shopId: $("#shopInfo").attr("data")},
            cols: [[
                {type: 'numbers'},
                {field: 'shopName', title: '店铺名称',width:300},
                {field: 'shopLevel',  templet: '#user-tpl-state', title: '类型',width: 200},
                {align: 'center', toolbar: '#service-table-bar', title: '操作'}
            ]]
        });}
        
        renderTable();

        // 工具条点击事件
        table.on('tool(service-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'stockRecord') { // 库存记录
                showEditModel1(data);
            }else if(layEvent === 'orderBuy'){// 采购记录
            	showOrderBuyModel(data,1);
            }else if(layEvent === 'orderSale'){// 销售记录
            	showOrderBuyModel(data,2);
            }else if(layEvent === 'customer'){// 顾客记录
            	showCustomerModel(data);
            }else if(layEvent === 'customerCard'){// 会员卡购买记录
            	showCustomerCardModel(data);
            }else if(layEvent === 'payCard'){// 会员卡消费记录
            	showPayCardModel(data);
            }else if(layEvent === 'productSale'){// 门店产品销售记录
            	showProductSaleModel(data,3);
            }else if(layEvent === 'productUse'){// 门店产品领用记录
            	showProductUseModel(data,4);
            }
        });

        // 显示表单弹窗
        var showEditModel1 = function (data) {
            admin.popupCenter({
            	area: '60%',
            	offset: '10%',
                title: '库存记录',
                path: 'system/service/stockRecord?shopId=' +data.id,
                data: {
                	shopId: data.id
                }
            });
        };
        
        // 采购记录
        var showOrderBuyModel = function(data,type) {
		layer.open({
	        type : 1,
	        area: '60%',
        	offset: '10%',
	        title : "订单记录",
	        maxmin : true,
	        btn : [ '关闭' ],
	        content : '<div class="layui-card"><div class="layui-card-body"><table class="layui-hide" id="templateTable"></table></div></div>'
	        +'	<script type="text/html" id="status-tpl-state">'
	        +'{{# if (d.orderStatus=== 1) { }}  '
	        +'   <button class="layui-btn layui-btn-xs">卖方待确认</button>'
	        +'{{# } else if(d.orderStatus=== 2) { }}  '
	        +'     <button class="layui-btn layui-btn-xs layui-btn-normal">卖方已确认</button>'
	        +'{{# } else if(d.orderStatus=== 3) { }}  '
	        +'    <button class="layui-btn layui-btn-xs layui-btn-danger">买方已确认</button>'
	        +'{{# } else if(d.orderStatus=== 4) { }}  '
	        +'    <button class="layui-btn layui-btn-xs layui-btn-danger">卖方已拒绝</button>'
	        +'{{# } else if(d.orderStatus=== 5) { }}  '
	        +'    <button class="layui-btn layui-btn-xs layui-btn-danger">买方已取消</button>'
	        +'{{# } else if(d.orderStatus=== 6) { }}  '
	        +'    <button class="layui-btn layui-btn-xs layui-btn-danger">卖方已取消</button>'
	        +' {{# } }} <\/script>',
	        success : function(index, layero) {
	              table.render({
	                elem: '#templateTable'
	       
	               ,url: "system/service/orderBuy"
	               
	               ,where:{shopId:data.id,type:type}
	                ,page: true //开启分页
	                ,cols: [[
	                    {type: 'numbers'},
	                    {field: 'userName',align:'center', title: '购买人'},
	                    {field: 'userPhone',align:'center', title: '购买人电话'},
	                    {field: 'shopName',align:'center', title: '所属门店'},
	                    {field: 'totalNum',align:'center', title: '总数量（件）'},
	                    {field: 'orderStatus', sort: true, templet: '#status-tpl-state',align:'center', title: '订单状态'},
	                    {
	                        sort: true,align:'center', templet: function (d) {
	                            return util.toDateString(d.createTime);
	                        }, title: '创建时间'
	                    }
	                ]]
	              });
	            
	        },
	        });
        };
        
        // 顾客记录
        var showCustomerModel = function(data) {
		layer.open({
	        type : 1,
	        area: '60%',
        	offset: '10%',
	        title : "顾客记录",
	        maxmin : true,
	        btn : [ '关闭' ],
	        content : '<div class="layui-card"><div class="layui-card-body"><table class="layui-hide" id="templateTable"></table></div></div>'
	        +' <script type="text/html" id="customerSex-tpl-state"> '
	        +' {{# if (d.customerSex=== 1) { }}  '
	        +' <button class="layui-btn layui-btn-xs layui-btn-normal">男</button>'
	        +' {{# } else if(d.customerSex=== 0) { }}  '
	        +' <button class="layui-btn layui-btn-xs layui-btn-danger">女</button>'
	        +' {{# } }} <\/script>',
	        success : function(index, layero) {
	              table.render({
	                elem: '#templateTable'
	       
	               ,url: "system/service/customer"
	               
	               ,where:{shopId:data.id}
	                ,page: true //开启分页
	                ,cols: [[
	                    {type: 'numbers', title: '序号'},
	                    {field: 'customerName', title: '顾客姓名'},
	                    {field: 'customerPhone',title: '手机号'},
	                    {field: 'customerSex', templet: '#customerSex-tpl-state', title: '性别'},
	                    {field: 'customerBirthday',  title: '生日'},
	                    {field: 'customerAddress',  title: '地址'},
	                    {
	                        sort: true, templet: function (d) {
	                            return util.toDateString(d.createTime);
	                        }, title: '创建时间'
	                    }
	                ]]
	              });
	            
	        },
	        });
        };
        //会员卡购买
        var showCustomerCardModel = function(data) {
    		layer.open({
    	        type : 1,
    	        area: '60%',
            	offset: '10%',
    	        title : "会员卡购买记录",
    	        maxmin : true,
    	        btn : [ '关闭' ],
    	        content : '<div class="layui-card"><div class="layui-card-body"><table class="layui-hide" id="templateTable"></table></div></div>'
    	        +'<script type="text/html" id="cardName-tpl-state">'
    	        +'{{# if (d.cardName=== "1") { }}  '
    	        +'<button class="layui-btn layui-btn-xs layui-btn-normal">脸卡</button>'
    	        +'{{# } else if(d.cardName=== "2") { }}  '
    	        +'<button class="layui-btn layui-btn-xs layui-btn-danger">颈卡</button>'
    	        +' {{# } }} <\/script>',
    	        success : function(index, layero) {
    	              table.render({
    	                elem: '#templateTable'
    	       
    	               ,url: "system/service/customerCard"
    	               
    	               ,where:{shopId:data.id}
    	                ,page: true //开启分页
    	                ,cols: [[
    	                    {type: 'numbers'},
    	                    {field: 'customerName', title: '顾客姓名'},
    	                    {field: 'customerPhone', title: '顾客手机号'},
    	                    {field: 'cardName', title: '会员卡类型'},
    	                    {field: 'cardTimes', title: '会员卡初始次数'},
    	                    {
    	                        sort: true, templet: function (d) {
    	                            return util.toDateString(d.createTime);
    	                        }, title: '创建时间'
    	                    }
    	                ]]
    	              });
    	            
    	        },
    	        });
            };
            //会员卡购买
            var showPayCardModel = function(data) {
        		layer.open({
        	        type : 1,
        	        area: '60%',
                	offset: '10%',
        	        title : "会员服务记录",
        	        maxmin : true,
        	        btn : [ '关闭' ],
        	        content : '<div class="layui-card"><div class="layui-card-body"><table class="layui-hide" id="templateTable"></table></div></div>'
        	        ,
        	        success : function(index, layero) {
        	              table.render({
        	                elem: '#templateTable'
        	       
        	               ,url: "system/service/payCard"
        	               
        	               ,where:{shopId:data.id}
        	                ,page: true //开启分页
        	                ,cols: [[
        	                    {type: 'numbers',title: '序号'},
        	                    {field: 'customerName', title: '顾客姓名'},
        	                    {field: 'customerPhone', title: '顾客手机号'},
        	                    {field: 'cardName', title: '会员卡类型'},
        	                    {field: 'serviceTimes', title: '剩余次数'},
        	                    {
        	                        sort: true, templet: function (d) {
        	                            return util.toDateString(d.createTime);
        	                        }, title: '创建时间'
        	                    }
        	                ]]
        	              });
        	            
        	        }
        	        });
                };
                
                //会员卡购买
                var showProductSaleModel = function(data,type) {
            		layer.open({
            	        type : 1,
            	        area: '60%',
                    	offset: '10%',
            	        title : "产品销售记录",
            	        maxmin : true,
            	        btn : [ '关闭' ],
            	        content : '<div class="layui-card"><div class="layui-card-body"><table class="layui-hide" id="productSaleTable" lay-filter="productSaleTable"></table></div></div>'
            	        ,
            	        success : function(index, layero) {
            	              table.render({
            	                elem: '#productSaleTable'
            	               ,url: "system/service/productSale"
            	               ,where:{shopId:data.id,type:type}
            	                ,page: true //开启分页
            	                ,cols: [[
            	                    {type: 'numbers',title: '序号'},
            	                    {field: 'customerName', title: '顾客姓名'},
            	                    {field: 'customerPhone', title: '顾客电话'},
            	                    {field: 'nickName', title: '操作员名称'},
            	                    {
            	                        sort: true, templet: function (d) {
            	                            return util.toDateString(d.createTime);
            	                        }, title: '创建时间'
            	                    },
            	                    {align: 'center', toolbar: '#productSale-table-bar', title: '操作'}
            	                ]]
            	              });
            	              

            	            
            	        },
            	        });
                    };
                    
  	              table.on('tool(productSaleTable)', function (obj) {
	                  var data = obj.data;
	                  var layEvent = obj.event;

	                  if(layEvent === 'productSaleDetail'){// 门店产品销售记录详情
	                  	showProductDetailModel(data,3);
	                  }
	              });
                    
                  //领用记录
                    var showProductUseModel = function(data,type) {
                		layer.open({
                	        type : 1,
                	        area: '60%',
                        	offset: '10%',
                	        title : "领用记录",
                	        maxmin : true,
                	        btn : [ '关闭' ],
                	        content : '<div class="layui-card"><div class="layui-card-body"><table class="layui-hide" id="productUseTable" lay-filter="productUseTable"></table></div></div>'
                	        ,
                	        success : function(index, layero) {
                	              table.render({
                	                elem: '#productUseTable'
                	       
                	               ,url: "system/service/productSale"
                	               
                	               ,where:{shopId:data.id,type:type}
                	                ,page: true //开启分页
                	                ,cols: [[
                	                    {type: 'numbers',title: '序号'},
                	                    {field: 'nickName', title: '操作员名称'},
        
                	                    {
                	                        sort: true, templet: function (d) {
                	                            return util.toDateString(d.createTime);
                	                        }, title: '创建时间'
                	                    },
                	                    {align: 'center', toolbar: '#productUse-table-bar', title: '操作'}
                	                ]]
                	              });
                	            
                	        },
                	        });
                        };
                        
                       table.on('tool(productUseTable)', function (obj) {
      	                  var data = obj.data;
      	                  var layEvent = obj.event;

      	                  if(layEvent === 'productUseDetail'){// 门店产品领用记录详情
      	                  	showProductDetailModel(data,4);
      	                  }
      	              });
                        
                        //详情
                        var showProductDetailModel = function(data,type) {
                    		layer.open({
                    	        type : 1,
                    	        area: '45%',
                            	offset: '10%',
                    	        title : "操作详情",
                    	        maxmin : true,
                    	        btn : [ '关闭' ],
                    	        content : '<div class="layui-card"><div class="layui-card-body"><table class="layui-hide" id="templateTable"></table></div></div>'
                    	        ,
                    	        success : function(index, layero) {
                    	              table.render({
                    	                elem: '#templateTable'
                    	       
                    	               ,url: "system/service/productSaleDetail"
                    	               
                    	               ,where:{code:data.code,type:type}
                    	                ,page: true //开启分页
                    	                ,cols: [[
                    	                    {type: 'numbers',title: '序号'},
                    	                    {field: 'productName', title: '产品名称'},
                    	                    {field: 'quantity', title: '数量'},
                    	                    {
                    	                        sort: true, templet: function (d) {
                    	                            return util.toDateString(d.createTime);
                    	                        }, title: '创建时间'
                    	                    }
                    	                ]]
                    	              });
                    	            
                    	        },
                    	        });
                            };

        // 搜索按钮点击事件
        $('#user-btn-search').click(function () {
            var key = $('#user-search-key').val();
            var value = $('#user-search-value').val();
            table.reload('service-table', {where: {searchKey: key, searchValue: value}});
        });
    });
</script>